<template>
    <div class="leiji">
        <h3 class="title">应急仓累计使用量ABCD</h3>
        <ul class="pvOfDayes">
            <li class="today">
                <p>今日使用量</p>
                <p><span style="color:#0DD8FC;">199</span><span>人次</span></p>
            </li>
            <li class="seven">
                <p>近7天使用量</p>
                <p><span style="color:#FF9200;">166</span><span>人次</span></p>
            </li>
            <li class="thirty">
                <p>近30天使用量</p>
                <p><span style="color:#E1DC55;">200</span><span>人次</span></p>
            </li>
        </ul>
        <div class="tongji">
            <h3 class="title">应急仓使用量统计</h3>
            <div class="annular" id="annular"></div>
        </div>
        <div class="bg"></div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            total:'23456',
            pvAll:{
                移动端访问量:'61,235',
                PC端访问量:'61,585',
                新用户访问量:'65,886',
                老用户访问量:'66,348'
            },
            option: {
                grid:{
                    left:'10%',
                    top:'10%',
                    bottom:'10%'
                },
                legend: {
                  orient: 'vertical',
                  top:'6%',
                  right: '2%',
                  itemWidth: 5,
                  itemHeight: 40,
                  itemGap: 15,//垂直方向距离
                  textStyle: {
                    color: '#7a8c9f',
                    fontSize: 12,
                    lineHeight: 22,
                    rich: {
                      percent: {
                        color: '#fff',
                        fontSize: 16,
                        padding:[0,6,0,0]
                      },
                      pur:{color:'#D341F4'},
                      sky:{color:'#05B2FF'},
                      blu:{color:'#2371ED'},
                      gre:{color:'#00FFFF'},
                    },
                  },
                  formatter:(name)=>{
                      let val = this.legendDatas(name)
                      let fontCor
                      switch(name){
                          case '移动端访问量':
                              fontCor = 'blu';
                              break;
                          case 'PC端访问量':
                              fontCor = 'sky';
                              break;
                          case '新用户访问量':
                              fontCor = 'pur';
                              break;
                          case '老用户访问量':
                              fontCor = 'gre'
                      }
                      return name+'\n{percent|'+val+'}'+'{gre|人次}'
                  },
                },
                tooltip: {
                  show: true,
                },
                series: [
                 {
                   type: 'pie',
                   radius: ['58%', '70%'],
                   center: ['35%', '45%'],
                   hoverAnimation: false,
                   label: {
                     show: true,
                     position:'outside',
                     formatter:function(val){
                         return parseInt(val.percent)+'%'
                     }                  
                   },
                   labelLine:{
                       show:true,
                   },
                   data: [
                     {
                       value: 30,
                       name: '移动端访问量',
                       itemStyle: {
                         color: '#1874F7',
                       },
                     },
                     {
                       value: 30,
                       name: 'PC端访问量',
                       itemStyle: {
                         color: '#05B7FC',
                       },
                     },
                     {
                       value: 40,
                       name: '新用户访问量',
                       itemStyle: {
                         color: '#FF9200',
                       },
                     },
                     {
                       value: 40,
                       name: '老用户访问量',
                       itemStyle: {
                         color: '#00F9EF',
                       },
                     },
                   ],
                 },
                 {
                   type: 'pie',           
                   radius: ['45%', '57%'],
                   center: ['35%', '45%'],
                   hoverAnimation: false,
                   labelLine:{
                       show:false,
                   },
                   label: {
                     show: true,
                     position:'center',
                     color:'#A6ACBC',
                     lineHeight:18,
                     rich:{
                         num:{color:'#fff',fontSize:16},
                         unit:{fontSize:13,color:'#fff',fontWeight:200,padding:[0,4]}
                     },
                     formatter:(val)=>{
                         return '访问总量\n'+'{num|'+this.getTotal()+'}'+'{unit|w}'
                     }                  
                   },                  
                   data: [
                     {
                       value: 30,
                       name: '移动端访问量',
                       itemStyle: {
                         color: '#1874F7',
                         opacity: 0.5,
                       },
                     },
                     {
                       value: 30,
                       name: 'PC端访问量',
                       itemStyle: {
                         color: '#05B7FC',
                         opacity: 0.5,
                       },
                     },
                     {
                       value: 40,
                       name: '新用户访问量',
                       itemStyle: {
                         color: '#FF9200',
                         opacity: 0.5,
                       },
                     },
                     {
                       value: 40,
                       name: '老用户访问量',
                       itemStyle: {
                         color: '#00F9EF',
                         opacity: 0.5,
                       },
                     },
                   ],
                 },
                 {
                   type: 'pie',
                   radius: ['32%', '44%'],
                   center: ['35%', '45%'],
                   hoverAnimation: false,
                   label: {
                     show:false,
                   },
                   labelLine:{
                       show:false,
                   },
                   data: [
                     {
                       value: 30,
                       name: '移动端访问量',
                       itemStyle: {
                         color: '#1874F7',
                         opacity: 0.1,
                       },
                     },
                     {
                       value: 30,
                       name: 'PC端访问量',
                       itemStyle: {
                         color: '#05B7FC',
                         opacity: 0.1,
                       },
                     },
                     {
                       value: 40,
                       name: '新用户访问量',
                       itemStyle: {
                         color: '#CF43F4',
                         opacity: 0.1,
                       },
                     },
                     {
                       value: 40,
                       name: '老用户访问量',
                       itemStyle: {
                         color: '#00F9EF',
                         opacity: 0.1,
                       },
                     },
                   ],
                 },
                ],
            }
        }
    },
    methods:{
        initChart(){
            var annular = document.getElementById('annular')
            if(document.body.clientWidth<1900){
              this.option.legend.itemGap = 10
              this.option.legend.right = '0'
              this.option.legend.top = '0'
            }
            let fsize = document.body.clientWidth/1920*16
            annular.style.height =document.body.clientWidth<1900? fsize*18+'px':'20rem'
            var myChart = this.$echarts.init(annular); 
            myChart.setOption(this.option)       
        },
        legendDatas(name){
           return this.pvAll[name]
        },
        getTotal(){
            return 1259
        }
    },
    mounted(){
        this.initChart()
        
    }
}
</script>

<style lang="scss" scoped>
    .leiji{
        background-image: url('../../../../static/images/commonServer/rightTop.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .title{
            height:2.3rem;
            line-height:3.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:right;
            padding-right:1.6rem;
        }
        .pvOfDayes{
            height:6rem;
            margin:3rem 2rem 0;
            display:flex;
            li{
                flex:1;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                p{
                    margin-left:1rem;
                    &:nth-of-type(1){
                        color:#fff;
                        height:3rem;
                        line-height:3rem;                     
                    }
                    &:nth-of-type(2){
                        span{
                           &:nth-of-type(1){
                               font-size:1.5rem;
                               margin-right:.5rem;
                               font-weight:600;
                           }
                            &:nth-of-type(2){
                               color:#E9F274;
                            }
                        }
                    }
                }
            }
            .today{
                background-image: url('../../../../static/images/commonServer/sky.png');
            }
            .seven{
                background-image: url('../../../../static/images/commonServer/blue.png');
            }
            .thirty{
                background-image: url('../../../../static/images/commonServer/sky.png');
            }
        }
        .tongji{
            margin:2rem 2rem 0;
            height:18rem;
            border-top:.07rem dashed #4990B7;
            position: relative;
            .title{
                text-align:left;
                margin-top:1rem;
            }
            .annular{
                margin-top:2rem;
                width:100%;
            }
        }
        .bg{
            width:100%;
            height:10%;
            background-image: url('../../../../static/images/commonServer/ground.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position:absolute;
            bottom:0%;
            left:0%;
        }
    }
</style>